<template>
  <el-card style="margin: 20px 0">
    <div>
    </div>
    <div style="margin: 10px 0">
      <el-button type="primary" size="small" @click="addRoleMessage();"><i class="el-icon-circle-plus-outline"></i> 新增
      </el-button>

    </div>
    <template>
      <el-table :data="roles" style="width: 100%" :border=true :cell-style="{ 'text-align': 'center' }"
                :header-cell-style="{ 'text-align': 'center' }">
        <el-table-column label="角色名称" width="200">
          <template slot-scope="scope">
              <span style="margin-left: 10px">
                <el-tag style="margin-right: 3px">{{
                    scope.row.name
                  }}</el-tag>
              </span>
          </template>
        </el-table-column>
        <el-table-column label="创建时间">
          <template slot-scope="scope">
            <i class="el-icon-time"></i>
            <span style="margin-left: 10px">{{ scope.row.gmtCreated }}</span>
          </template>
        </el-table-column>


        <el-table-column label="操作" width="300">
          <template slot-scope="scope">
            <el-button size="small" type="primary" style="margin-right: 10px" @click="editor(scope.row);">编辑
            </el-button>
            <!--confirm确认事件-->
            <el-popconfirm @confirm="deleteRole(scope.row.id)" title="确定删除这个角色吗？">
              <el-button v-if="scope.row.name != '超级管理员' && scope.row.name != '普通管理员' &&
                             scope.row.name != '普通用户' && scope.row.name != '媒体'" size="small" type="danger"
                         slot="reference">删除
              </el-button>
            </el-popconfirm>
          </template>
        </el-table-column>
      </el-table>
    </template>
    <div>
      <el-dialog title="操作分配：" :visible.sync="transfer"  top="12vh">
        <template>

          <div ref="SelectFile">
            <el-form action>
              <el-form-item label="角色">
                {{ this.currentRole.name }}
              </el-form-item>
              <el-form-item>
                <el-transfer v-model="value" :props="{key: 'id',label: 'name'}" :titles="['可选操作', '已选操作']"
                             @change="handleChange" :data="permissions"></el-transfer>
              </el-form-item>
              <el-form-item>
                <el-button style="float: right" @click="transfer = false">取消</el-button>
                <el-button style="float: right" type="primary" @click="changeRoleOperationById">更改</el-button>
              </el-form-item>
            </el-form>
          </div>


        </template>
      </el-dialog>
    </div>

    <div style="padding: 10px 0; float: right">
      <el-pagination :page-size="10" layout="total, prev, pager, next, jumper" :total=length
                     @current-change="handleCurrentChange" :current-page="currentPage">
      </el-pagination>
    </div>
  </el-card>
  <!--    分页-->

</template>

<style>
.headerBg {
  background: #eee !important;
}
</style>

<script>


export default {
  data() {
    return {
      collapseBtnClass: "el-icon-s-fold",
      headerBg: "headerBg",
      value: [],
      role: {},
      roles: [],
      currentPage: 1,
      searchPrams: {
        pageNum: 1,
        pageSize: 10,
      },
      length: 0,
      transfer: false,
      permissions: [],
      currentRole: {},
    };
  },
  created() {
    this.list();
    this.getAllPermissions();
  },

  methods: {
    list() {
      this.axios.post("/role/role-list", this.searchPrams).then(({data}) => {
        if (data.state == 20000) {
          this.roles = data.data.list;
          this.length = data.data.totalCount;


        } else {
          this.$message.error(data.message);
        }
      });
    },

    editor(obj) {
      this.currentRole = obj;
      console.log("this.currentRole:",this.currentRole.id)
      this.transfer = true;
      this.axios.get("/role/permission-list-by-id?id="+this.currentRole.id).then(({data}) => {
        if (data.state == 20000) {
          console.log("data:",data.data)
          data.data.forEach((item)=>{
            this.value.push(item.id);
          })

        } else {
          this.$message.error(data.message);
        }
      });

    },


    addRoleMessage() {
      this.$prompt('请输入角色名', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
      }).then(({value}) => {
        this.role.name = value
        this.axios.post("/role/insert-role", this.role).then(({data}) => {
          if (data.state == 20000) {
            this.$message.success(data.message);
            this.list();
          } else {
            this.$message.error(data.message);
          }
        });
      }).catch(() => {
        this.$message({
          type: 'info',
          message: '取消输入'
        });
      });
    },

    deleteRole(id) {

      this.axios.get("/role/delete-id?id=" + id).then(({data}) => {
        if (data.state == 20000) {
          this.$message.success(data.message);
          this.list();
        } else {
          this.$message.error(data.message);
        }
      });
    },

    getAllPermissions() {
      this.axios.get("/role/permission-list").then(({data}) => {
        if (data.state == 20000) {
          this.permissions = data.data;
        } else {
          this.$message.error(data.message);
        }
      });
    },



    handleCurrentChange(val) {
      /*val就是页号*/
      this.currentPage = val;
      this.searchPrams.pageNum = val;
      this.list();
    },
    handleChange() {

    },
    changeRoleOperationById() {
      this.axios.get("/role/change-permission?value=" + this.value + "&roleId=" + this.currentRole.id).then(({data}) => {
        if (data.state == 20000) {
          this.$message.success(data.message);
          this.list();
          this.transfer = false;
        } else {
          this.$message.error(data.message);
        }
      });
    },
  },
  /*当前页变动时候触发的事件*/


};
</script>
